<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    这是父组件:{{username}}
    <hr>
    <com @btn="clickMe"></com>

</div>
<script>
    let com ={
        template:`
        <div>
        这是子组件
        <button @click="clickBtn">hello,点我</button>
</div> `,
        methods:{
            clickBtn(){
                this.$emit("btn","百知教育")
            }
        }
    }
    new Vue({
        el: "#app",
        data: {
            username:"小坏蛋",
        },
        methods: {
            clickMe(username){
                console.log(username)
                this.username = username;
            }
        },
        components:{
            com:com,
        }
    })
</script>
</body>
</html>